<script lang="ts" setup>
import type {BannerItem} from "@/types/home";
import {ref, watch} from 'vue'
import type {ImgError} from "@/types/error";
import {ImgErrorType} from "@/enum/imgErrorType";

interface swiperProps {
  currentItemId: string,
  source: string,
  current: number
}

const activeIndex = ref(0)
const swiperChange = (event: swiperProps) => {
  // !非空断言
  // activeIndex.value = ev.detail!.current
  activeIndex.value = event.current
}

const props = defineProps<{
  bannerList: BannerItem[]
  isFinish: boolean
}>()

const bannerImgList = ref<{ image: string, title: string }[]>()
watch(props, () => {
  if (props.bannerList) {
    bannerImgList.value = props.bannerList.map((item, index) => {
      return {
        image: item.url,
        title: item.name
      }
    })
  }
})
/*异常处理*/
//图片拿到链接但加载失败
const emit = defineEmits<{
  imgError: [erroImg: ImgError]
}>()
const errorType = ImgErrorType
const onImgError = (index: number, type: ImgErrorType) => {
  emit('imgError', {index, type})
}

/**
 *  跳转到详情
 * @param index 点击轮播图索引
 */
const goDetail = (index: number) => {
  uni.navigateTo({url: '/subPkg/detail/detail?id=' + props.bannerList[index].id})
}

const loading = ref(true)
watch(props, () => {
  // 拿到图片资源需要耗时，所以延时一下结束loading
  if (props.isFinish) {
    setTimeout(() => {
      loading.value = false
    }, 500)
  }
})
</script>

<template>
  <view class="carousel">
    <!--    <swiper :autoplay="true" :circular="true" :interval="3000"   vertical="true"
                @change="swiperChange">
          <swiper-item v-for="(item,index) in bannerList" :key="item.id">
            <navigator :url="`/subPkg/detail/detail?id=${item.id}`" class="navigator" hover-class="none">
              <image :mode="item.url===errorType.ERROR_IMG_URL?'aspectFit':'aspectFill'" :src="item.url" class="image"
                     @error="onImgError(index,errorType.SWIPER_IMG_ERROR)"></image>
            </navigator>
            <text style="position: absolute;bottom: 20rpx;left: 30rpx" class="text-white text-xl text-shadow">{{item.name}}</text>
          </swiper-item>
        </swiper>
        &lt;!&ndash; 指示点 &ndash;&gt;
        <view class="indicator">
          <text
              v-for="(item, index) in bannerList?.length"
              :key="item"
              :class="{ active: index === activeIndex }"
              class="dot"
          ></text>
        </view>-->
    <uv-swiper
        :autoplay="true"
        :height="150"
        :indicator="true"
        :indicatorStyle="{bottom:'10rpx'}"
        :list="bannerImgList"
        :loading="loading"
        :show-title="true"
        :title-style="{color:'#fff',paddingLeft:'25rpx',fontSize:'16px',height:'40px',
        background: 'linear-gradient(to top, rgba(10, 10, 10, 0.3) 60%, rgba(255, 255, 255, 0) 100%)'}"
        bgColor="none"
        circular
        indicatorMode="dot"
        keyName="image"
        nextMargin="30"
        previousMargin="30"
        radius="8"
        @change="swiperChange"
        @click="goDetail">
      <template v-slot:indicator>
            <view class="indicator">
              <text
                  v-for="(item, index) in bannerList?.length"
                  :key="item"
                  :class="{ active: index === activeIndex }"
                  class="dot"
              ></text>
            </view>
      </template>
    </uv-swiper>
  </view>
</template>

<style lang="scss">
/* 轮播图 */
@import 'styles/aw-swiper';

.indicator {
  margin-top: 10px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15rpx;
  transition: all 0.2s ease-in-out;

  .dot {
    transition: all 0.2s ease-in-out;
    height: 8rpx;
    width: 20rpx;
    border-radius: 6rpx;
    background-color: #dbdbdb;
  }

  .active {
    background-color: #39c5bb;
    width: 40rpx;
  }
}
</style>